<template>
	<button type="default" @click="decryptPhoneNumber">获取手机号</button>
	<view>
		<image :src="picurl" mode="aspectFit"></image>
	</view>
	<view class="box" :class="{active:isActive}">
		v-bind指令
	</view>
	<view class="box" :style="vStyle">
		v-bind指令2
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const picurl = ref("../../static/pic1.png")
	const arr = ref([
		"../../static/pic1.png",
		"../../static/pic2.png",
		"../../static/pic3.webp",
		"../../static/pic4.jpg"
	]);
	
	let isActive = ref(false);
	let index = 0;
	let width = 200;
	let height = 200;
	let vStyle = ref({'width':'200rpx', 'height': '200rpx'})
	function decryptPhoneNumber() {
		console.log('点击测试')
		index ++;
		picurl.value = arr.value[index % 4];
		isActive.value = !isActive.value;
		width += 5;
		height += 5;
		vStyle.value.width = width + 'rpx';
		vStyle.value.height = height + 'rpx';
		console.log(vStyle.value)
	}
</script>

<style lang="scss">
	.box {
		width: 400rpx;
		height: 400rpx;
		background: navajowhite;
		font-size: 20px;
	}
	.active{
		background: skyblue;
		color: maroon;
	}
</style>
